<template>
	<view class="container"  :data-theme="themeStyle">
		<image :src="$util.img('upload/uniapp/pay_success.png')" mode="widthFix" class="result-image"  v-if="payInfo.pay_status"></image>
		<image :src="$util.img('upload/uniapp/pay_fail.png')" mode="widthFix" class="result-image" v-else></image>
		<view class="msg" v-if="payInfo.pay_status">{{ $lang('paymentSuccess') }}</view>
		<view class="msg" v-else>{{ $lang('paymentFail') }}</view>
		<view class="pay-amount">￥{{ payInfo.pay_money }}</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<view class="operation">
			<view class="btn ns-text-color ns-border-color" @click="$util.redirectTo('/pages/member/index/index', {}, 'reLaunch')" v-if="token">{{ $lang('memberCenter') }}</view>
			<view class="btn go-home ns-bg-color ns-border-color" @click="goHome()">{{ $lang('goHome') }}</view>
		</view>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	data() {
		return {
			payInfo: {},
			outTradeNo: '',
			token: null
		};
	},
	components: {
		nsShowToast
	},
	mixins:[globalConfig],
	onLoad(option) {
		if (option.code) this.outTradeNo = option.code;
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		this.getPayInfo();

		if (uni.getStorageSync('token')) this.token = uni.getStorageSync('token');
	},
	methods: {
		getPayInfo() {
			this.$api.sendRequest({
				url: '/api/pay/info',
				data: {
					out_trade_no: this.outTradeNo
				},
				success: res => {
					if (res.code >= 0 && res.data) {
						this.payInfo = res.data;
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					} else {
						this.$util.showToast({
							title: '未获取到支付信息!！',
							success: () => {
								setTimeout(() => {
									this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
								}, 1500);
							}
						});
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		goHome() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
		}
	}
};
</script>

<style lang="scss">
.container {
	padding-top: 162rpx;
	padding-bottom: 162rpx;
	margin: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.result-image {
		width: 166rpx;
	}
	.msg {
		font-size: $ns-font-size-base;
		color: #000;
		margin-top: 58rpx;
	}
	.pay-amount {
		font-size: $ns-font-size-xxx-lg;
		color: #000;
		margin-top: 30rpx;
	}
	.pay-text {
		font-size: $ns-font-size-base;
		color: #ABABAB;
		display: flex;
		align-items: center;
		text {
			margin-left: 14rpx;
		}
	}
	.operation {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 48rpx;
		box-sizing: border-box;
		.btn {
			font-size: $ns-font-size-base;
			width: 310rpx;
			height: 78rpx;
			border-radius: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			&:first-child {
				border: 1px solid #fff;
			}
		}
	}
}

</style>
